<template>
&ensp; <a @click="back()"><el-icon><ArrowLeftBold /></el-icon><span style="font-size: 22px">返回</span></a>
        <div style="display: flex" v-if="show">

            <div style="width: 80%;margin:auto;background-color: #dbdbdb">
            <div style="font-size: 25px;text-align: center">    <p v-html="postStore.showPost.postTitle"/>     </div>
            <div style="background-color: #97a8be">
                <div style="text-align: center">
                    {{postStore.showPost.customer.customerName }}
                    <el-icon><View /></el-icon> 创建于{{postStore.showPost.postCreateAt }}
                    <el-icon><View /></el-icon> 喜欢量{{postStore.showPost.postLikeCount}}
                    <el-icon><View /></el-icon> 阅读量{{postStore.showPost.postReadCount}}
                </div>


            </div>
<!--文章内容-->
<div style="margin: 10px 20px">
    <p v-html="postStore.showPost.postContent"/>
</div>

        <div style="margin:10px 20px">

            <div style="font-size: 20px;display: flex"><el-icon style="margin-top: 4px"><Comment /></el-icon>评论 <p style="font-size: 14px;color: #97a8be;margin: 6px">{{postStore.showPost.commentList.length}}</p> </div>
            <div style="background-color: #a0a0a0;margin: 8px 0px">
               <el-input
                       v-model="textarea"
                       style="width: 100%;margin: auto"
                       :rows="2"
                       type="textarea"
                       placeholder="尊重的评论是打动人心的入场券"
               />
               <el-button type="primary" style="position:relative;left:93%" @click="fabu">发布</el-button>
           </div>

<!--            评论列表-->
            <div v-for="(item,index) in postStore.showPost.commentList" style="margin-top: 10px;">

<!--                评论内容列表条目-->
                <div style="display: flex">

<!--                    头像-->
                    <div >
                        <img :src="getAvatar(item.customer.customerAvatar)" style="width:40px;height: 40px;border-radius:50%" />
<!--                        {{item.customer.customerAvatar}}-->
                    </div>
<!--                名字，评论-->
                    <div style="width:100%;">
                        <div style="height: 30px;line-height: 30px;margin:6px 0px 0px 20px;font-size: 15px;color: #9E9C9C">{{item.customer.customerName}}</div>
                        <div style="margin:6px 0px 5px 20px;white-space: pre"> {{item.commentContent}}</div>

<!--                       导航 下面的回复信息-->
                        <div style="height: 30px;line-height: 30px;margin:6px 0px 0px 20px;font-size: 15px;color: #9E9C9C;display: flex">
                            <div>{{item.commentCreateAt}}</div>
                            <div style="cursor: pointer;margin-left: 50px" @click="huifu(index)"> 回复</div>
                        </div>

<!--                        文章回复信息-->
                        <div  style="margin-left: 20px;font-size: 15px;color: #9E9C9C;cursor: pointer" @click="showReComment(index)">共{{item.childList.length}}条回复、点击查看</div>

<!--                        回复内容-->
                        <div v-if="showChildComment === index" v-for="rComment in item.childList" >
                            <div style="display: flex" >
                            <div style="margin: 10px 0px 0px 20px">
                                <img :src="getAvatar(rComment.avatar)" style="width:30px;height: 30px;border-radius:50%" />
                            </div>
                                <div>

                                    <div style="display: flex">
                                        <div style="height: 30px;line-height: 30px;margin:8px 0px 0px 12px;font-size: 12px;color: #9E9C9C">{{rComment.customerName}}</div>
                                        <div style="height: 30px;line-height: 30px;margin:8px 0px 0px 20px;font-size: 12px;color: #9E9C9C;">{{rComment.commentCreateAt}}</div>
                                    </div>

                                    <div style="margin:10px 0px 5px 20px;white-space: pre;font-size: 12px"> {{rComment.commentContent}}</div>
                                </div>

                            </div>



                        </div>



                        <!--                        //回复信息的框-->
                        <div style="display: flex"  v-if="showHuiFu===index" >
                            <div style="margin: 10px 0px 0px 20px">
                                <img :src="getCustomerAvatar()" style="width:30px;height: 30px;border-radius:50%" />
                                <!--                        {{item.customer.customerAvatar}}-->
                            </div>
                            <div style="background-color: #dbdbdb;margin: 10px 0px 10px 10px;width: 100%" >
                                <el-input
                                        v-model="textarea2"
                                        style="width: 100%;margin: auto;font-size: 12px"
                                        :rows="1"
                                        type="textarea"
                                        :placeholde="`回复@`+item.customer.customerName"
                                />
                                <el-button type="primary" style="position:relative;left:87%" @click="huifu2(item.commentId)">回复</el-button>
                                <div>
                                </div>


                        </div>
                    </div>

                    <br/>

                </div>

            </div>

                <hr/>
            </div>



        </div>
        </div>

        </div>
    <br/><br/><br/>
</template>

<script setup lang="ts">
    import usePostStore from "@/store/modules/post";
     import {useRoute, useRouter} from "vue-router";
    import { ref } from "vue";
    import {customerAddComment} from "@/api/web/comment.js"
    import {getCustomerId,getCustomerAvatar} from "@/utils/auth.js";
    import {addPostReadCount} from "@/api/web/post.js";

    const postStore = usePostStore()
    const route = useRoute()
    const  router = useRouter()
    const postId = route.params.id
    const show = ref(false);
    console.log(show.value)
     postStore.getPostById(postId).then((res:boolean) => {
        // console.log(res); // 输出：异步操作成功的值
        show.value =res
    });

    const getAvatar=( avatar:string)=>{
        return import.meta.env.VITE_APP_BASE_API+avatar
    }
    //评论内容
    const textarea = ref('')
    // 发布评论
    const fabu = () =>{
        let  comment = {
            /** 主键自增， */
            commentId:null,
            /** 评论顾客id,外键 */
            commentCustomeId:getCustomerId(),
            /** 评论文章id,外键 */
            commentPostId:postId,
            /** 评论id */
            commentReId:null,
            /** 评论内容 */
            commentContent:textarea.value,
            /** 评论时间 */
            commentCreateAt:Date.now()
        }
        console.log(comment)
        customerAddComment(comment).then((res: any)=>{
            console.log(res)
            postStore.getPostById(postId)
            textarea.value=""
        })
    }


    //回复信息功能
    //是否显示回复文本框
    const showHuiFu = ref(-1)
    //回复内容
    const textarea2 = ref('')

    const huifu=(index:number)=>{
        if(showHuiFu.value === index){
            showHuiFu.value = -1
        }else{
            showHuiFu.value = index
        }

    }
    //提交回复信息
    const huifu2=(commentId:number)=>{
        let  comment = {
            /** 主键自增， */
            commentId:null,
            /** 评论顾客id,外键 */
            commentCustomeId:getCustomerId(),
            /** 评论文章id,外键 */
            commentPostId:postId,
            /** 评论id */
            commentReId:commentId,
            /** 评论内容 */
            commentContent:textarea2.value,
            /** 评论时间 */
            commentCreateAt:Date.now()
        }
        console.log(comment)
        customerAddComment(comment).then((res: any)=>{
            console.log(res)
            postStore.getPostById(postId)
            textarea2.value=""
        })
    }

    //查看回复的信息
    const showChildComment = ref(-1)
    const showReComment=(index:number)=>{

        if(  showChildComment.value === index){
            showChildComment.value = -1
        }else{
            showChildComment.value = index
        }
    }




    setTimeout(()=>{
        //todo 文章阅读量+1
        console.log("文章阅读量加1")
        addPostReadCount(postId).then((res:any)=>{
            console.log(res.data)
        })
   },5000)
    const back = ()=>{
        router.go(-1)
    }
</script>


